<template>
	<div @click="topage(pageList[0].id)" bubble="true">
		<div class="hot-goods" v-if="haveThumbnial==false">
			<div class="ad_tittle_content" >
				<div><text class="tittle">{{pageList[0].name}}</text></div>
				<div class="more_text"><text class="all_text">更多</text>
					<icon class="icon" content="tb-right" fontSize="38"></icon>
				</div>
			</div>
		</div>
		<div class="hot-goods-main">
			<div class="left-box" @click="toLink(navigations[0])">
				<image :src="navigations[0].logo" style="height: 232px;width: 345px;margin-top: 20px;" class="left-box-img"  v-if="haveThumbnial==false"></image>
			</div>
			<div class="right-box" @click="toLink(navigations[1])">
				<image :src="navigations[1].logo" style="height: 232px;width: 345px;margin-top: 20px;" class="right-box-img" v-if="haveThumbnial==false"></image>
			</div>
		</div>
		<div v-if="haveThumbnial==true">
			<image class='hot-goods-bg' :src="pageList[0].thumbnial"></image>
		</div>
	</div>
</template>
<script>
	const eeui = app.requireModule('eeui');
	import {
		list as wxPageList
	} from '../../../../api/wxPage'
	import {
		list as navigationList
	} from '../../../../api/navigation'
	export default {
		name: 'hotGoods',
		data() {
			return {
				haveThumbnial: false,
				navigations: [{logo:''},{logo:''}],
				pageList: [{id:'',name:'',thumbnial:''}],
				tagIds: []
			}
		},
		props: ['content'],
		created() { // 在实例创建完成后被立即调用
			this.loadPage()
			this.loadnavigation()
		},
		methods: {
			topage(data) {
				console.log('1111111')
				eeui.openPage({
					statusBarType: 'immersion',
					statusBarStyle:false,
					url: 'root://pages/index/wxPage/wxPage.js',
					params: data
				})
			},
			toLink(e) {
				console.log('222222222')
				if (e.typeId) {
					if (e.type == 1) {
						eeui.openPage({
							statusBarType: 'immersion',
							statusBarStyle:false,
							url: 'root://pages/goods/category/category.js',
							params: e.typeId
						})
					}
					if (e.type == 2) {
						eeui.openPage({
							statusBarType: 'immersion',
							statusBarStyle:false,
							url: 'root://pages/index/wxPage/wxPage.js',
							params: e.typeId
						})

					}
					if (e.type == 3) {
						eeui.openPage({
							statusBarType: 'immersion',
							statusBarStyle:false,
							url: 'root://pages/goods/product/details.js',
							params: e.typeId
						})
					}
				}

			},
			loadPage() {

				this.tagIds = this.content.tagids.split(',');
				for (var i = 0; i < this.tagIds.length; i++) {
					this.tagIds[i] = parseInt(this.tagIds[i])
				}
				wxPageList({
					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds
				}).then(res => {

					this.pageList = res.data.data
					if (!this.isNull(this.pageList[0].thumbnial)) {
						this.pageList[0].thumbnial = this.thumbnail(this.pageList[0].thumbnial, 750, 344)
						this.haveThumbnial = true
					}
				})
			},
			loadnavigation() {
				this.tagIds = this.content.tagids.split(',');
				for (var i = 0; i < this.tagIds.length; i++) {
					this.tagIds[i] = parseInt(this.tagIds[i])
				}
				if (this.tagIds.length > 0) {
					navigationList({
						mchId: this.getGlobalData().mchId,
						tagIds: this.tagIds,
						pageSize: '2'
					}).then(res => {
						this.navigations = res.data.data
						this.navigations[0].thumbnial = this.thumbnail(this.navigations[0].thumbnial, 345, 232)
						this.navigations[1].thumbnial = this.thumbnail(this.navigations[1].thumbnial, 345, 232)
					})
				} else {
					navigationList({
						mchId: this.getGlobalData().mchId,
						pageSize: '2'
					}).then(res => {
						this.navigations = res.data.data
						this.navigations[0].thumbnial = this.thumbnail(this.navigations[0].thumbnial, 345, 232)
						this.navigations[1].thumbnial = this.thumbnail(this.navigations[1].thumbnial, 345, 232)
					})
				}
			},
		},
		components: {},
	}
</script>

<style scoped>
	.hot-goods {
		width: 750px;
		height: 344px;
		margin-top: 20px;
		padding-top: 24px;
		padding-left: 20px;
		padding-right: 20px;
		background-image: linear-gradient(to bottom, rgb(216, 195, 159), rgb(248, 248, 248));
	}

	.all_text {
		margin-top: 9px;
		height: 30px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 0.3);
	}

	.icon {
		width: 50px;
		height: 50px;
		color: rgba(42, 42, 54);
		opacity: 0.3;
	}

	.tittle-gsp {
		height: 48px;
	}

	.ad_tittle_content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.hot-goods-bg {

		width: 750px;
		height: 344px;

	}

	.tittle {
		font-size: 36px;
		font-weight: 500;
		color: rgb(255, 255, 255);
	}

	.more_text {
		display: flex;
		flex-direction: row;
	}

	.hot-goods-main {
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.top-text {
		font-size: 36px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.left-box {

		background: linear-gradient(0deg, rgba(255, 239, 237, 1), rgba(255, 250, 250, 1));
		border-radius: 16px 0px 0px 16px;
		display: flex;
		flex-direction: row;

	}

	.left-box-img {
		border-radius: 16px 0px 0px 16px;
	}

	.box-img {
		margin-top: 31px;
		text-align: center;
		width: 50%;
	}

	.right-box {
		background: linear-gradient(0deg, rgba(250, 244, 232, 1), rgba(250, 248, 245, 1));
		border-radius: 0px 16px 16px 0px;
	}

	.right-box-img {
		border-radius: 0px 16px 16px 0px;
	}
</style>
